<template>
  <view class="qr-production-page">
    <TopBar
      left-icon="/static/user.png"
      scan-icon="/static/saoyisao.png"
      menu-icon="/static/menu.png"
      @menu="toggleMenu"
    />

    <scroll-view scroll-y class="form-scroll">
      <!-- 返回箭头 -->
      <view class="back-row" @click="goBack">
        <image
          class="back-arrow-icon"
          src="/static/left.png"
          mode="aspectFit"
        />
      </view>

      <!-- 搜索框 -->
      <view class="search-box">
        <image src="/static/search.png" class="search-icon" />
        <input class="search-input" placeholder="Value" />
      </view>

      <!-- 标题 -->
      <text class="section-title">QR code_Production</text>
      <view class="info-card">
        <text class="info-code">VA7585241</text>
        <text class="info-date">23/09/2025</text>
      </view>

      <!-- 二级标题 -->
      <text class="sub-title">Production QR code</text>

      <!-- 商品列表：每行一个，左右结构 -->
      <view class="product-list">
        <view class="product-card" v-for="(item, index) in products" :key="index">
          <!-- 左侧：上下结构 -->
          <view class="product-left">
            <!-- 上部：图片+文字左右结构 -->
            <view class="product-top">
              <image :src="item.image" class="product-image" mode="aspectFit" />
              <view class="product-info">
                <text class="product-code">{{ item.code }}</text>
                <text class="product-name">{{ item.name }}</text>
                <text class="product-units">{{ item.units }} units</text>
              </view>
            </view>
            <!-- 下部：Export按钮 -->
            <view class="product-action">
              <text class="action-btn" @click="exportQRCode(item)">Export QR code</text>
            </view>
          </view>
          <!-- 右侧：二维码 + UUID -->
          <view class="product-right">
            <image src="/static/allOrders/Climata QR.png" class="qr-image" mode="aspectFit" />
            <text class="uuid-text">{{ item.uuid }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <CustomTabbar active="import" />

    <AccountMenu
      v-if="showMenu"
      :style="{ '--anchor-top': '70px', '--anchor-right': '0px' }"
      @close="closeMenu"
      @select="closeMenu"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import TopBar from "@/components/TopBar.vue";
import AccountMenu from "@/components/AccountMenu.vue";
import CustomTabbar from "@/components/CustomTabbar.vue";

const showMenu = ref(false);
const toggleMenu = () => {
  showMenu.value = !showMenu.value;
};
const closeMenu = () => {
  showMenu.value = false;
};
const goBack = () => {
  uni.navigateTo({ url: '/pages/brand/order-detail' });
};

// 商品列表数据
const products = ref([
  { code: '46DC85241', name: 'T shirt', units: 100, image: '/static/record/type1.png', uuid: 'UUID: 550e8400-e29b-41d4-a716-446655440000' },
  { code: '46DC85242', name: 'T shirt', units: 50, image: '/static/record/type2.png', uuid: 'UUID: 550e8400-e29b-41d4-a716-446655440001' },
  { code: '46DC85243', name: 'T shirt', units: 100, image: '/static/record/type3.png', uuid: 'UUID: 552b8400-e29b-41d4-a716-446655440002' },
  { code: '46DC85244', name: 'T shirt', units: 100, image: '/static/record/type4.png', uuid: 'UUID: 553e8400-e29b-41d4-a716-446655440003' },
  { code: '36DC76541', name: 'T shirt', units: 100, image: '/static/record/type5.png', uuid: 'UUID: 673e8400-e29b-41d4-a716-446655440004' },
  { code: '36DC76542', name: 'T shirt', units: 100, image: '/static/record/type6.png', uuid: 'UUID: 675e8400-e29b-41d4-a716-446655440005' }
]);

const exportQRCode = (item) => {
  // 导出二维码逻辑
};
</script>

<style lang="scss">
.qr-production-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%);
}
.form-scroll {
  margin-top: 60px;
  padding: 0 16px 84px 16px;
  box-sizing: border-box;
}
.back-row {
  margin: 12px 0 0 -8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-arrow-icon {
  width: 24px;
  height: 24px;
}

.search-box {
  height: 44px;
  background: #fff;
  border-radius: 24px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-top: 8px;
}
.search-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.search-input {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: #333;
}

.section-title {
  display: block;
  margin: 18px 4px 10px;
  font-size: 18px;
  font-weight: 800;
  color: #0b1e2a;
}
.info-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eaf6ff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  margin: 0 4px 12px;
}
.info-code {
  color: #0b1e2a;
  font-size: 14px;
  font-weight: 600;
}
.info-date {
  color: #0b1e2a;
  font-size: 12px;
  opacity: .9;
}

.sub-title {
  display: block;
  margin: 12px 4px 14px;
  font-size: 16px;
  font-weight: 700;
  color: #0b1e2a;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 8px;
}
.product-card {
  background: #e7f5f7;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.product-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.product-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.product-image {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
}
.product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.product-code {
  font-size: 14px;
  font-weight: 700;
  color: #0b1e2a;
}
.product-name {
  font-size: 13px;
  color: #0b1e2a;
}
.product-units {
  font-size: 12px;
  color: #0b1e2a;
  font-weight: 600;
}
.product-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 90px;
}
.qr-image {
  width: 85px;
  height: 85px;
}
.uuid-text {
  font-size: 9px;
  color: #0b1e2a;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}
.product-action {
  display: flex;
  justify-content: flex-start;
}
.action-btn {
  background: #23323a;
  color: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
</style>
